<template>
  <div>
    <el-table :data="tableData" :span-method="arraySpanMethod" border style="width: 100%">
      <el-table-column type="selection" width="55"> </el-table-column>
      <!-- <el-table-column prop="id" label="ID" width="180"> </el-table-column> -->
      <el-table-column prop="name" label="姓名"> </el-table-column>
      <el-table-column prop="amount1" sortable label="数值 1">
      </el-table-column>
      <el-table-column prop="amount2" sortable label="数值 2">
      </el-table-column>
      <el-table-column prop="amount3" sortable label="数值 3">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{
        id: '12987122',
        name: '王小虎',
        amount1: '234',
        // amount2: '234',
        amount3: 10
      }, {
        id: '12987123',
        name: '王小虎',
        amount1: '234',
        amount2: '4.43',
        amount3: 12
      }, {
        id: '12987124',
        name: '王小虎',
        amount1: '324',
        amount2: '1.9',
        amount3: 9
      }, {
        id: '12987125',
        name: '王小虎',
        amount1: '621',
        amount2: '2.2',
        amount3: 17
      }, {
        id: '12987126',
        name: '王小1虎',
        amount1: '539',
        amount2: '4.1',
        amount3: 15
      }]

    };
  },

  created() {
    this.init(this.tableData);
  },

  methods: {
    /**
     * 预处理数据
     */
    init(list) {
      //设置单元格

      // 先给所有的数据都加一个v.rowspan = 1
      list.forEach((item) => {
        item.rowspan = 1;
      });
      // 双层循环 合并行
      for (let i = 0; i < list.length; i++) {
        for (let j = i + 1; j < list.length; j++) {
          //此处可根据相同字段进行合并，此处是根据的id
          if (list[i].name === list[j].name) {
            list[i].rowspan++;
            list[j].rowspan--;
          }
        }
        // 这里跳过已经重复的数据
        i = i + list[i].rowspan - 1;
      }





    },
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      // 要合并的字段在第几列
      if (columnIndex === 1) {
        return {
          rowspan: row.rowspan,  // 行合并 当前行 向下合并多少个行
          colspan: 1  // 合并完行后 合并后的数据 要占多少列
        };
      }

      if (columnIndex === 2) {
        if (rowIndex == 0) {
          return [1, 2];
        } else {
          return [1, 1]
        }
      }
    },

    // objectSpanMethod({ row, column, rowIndex, columnIndex }) {
    //   if (columnIndex === 1) {
    //     if (row.name === '王小虎') {
    //       return [2, 1];
    //     } else {
    //       return [0, 0];
    //     }
    //   }

    // }
  },
};
</script>

<style lang="less" scoped>

</style>
<!-- <template>
  <div id="app">
    <el-table :data="tableData" :span-method="objectSpanMethod" border style="width: 100%; margin-top: 20px">
      <el-table-column prop="id" label="ID" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名"> </el-table-column>
      <el-table-column prop="amount1" label="数值 1（元）"> </el-table-column>
      <el-table-column prop="amount2" label="数值 2（元）"> </el-table-column>
      <el-table-column prop="amount3" label="数值 3（元）"> </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      spanArr: [], //一个空的数组，用于存放每一行记录的合并数
      pos: "", //pos是spanArr的索引,需要合并行下标
      spanArr2: [],
      pos2: "",

      tableData: [
        {
          id: "1",
          name: "王小虎1",
          amount1: "234",
          amount2: "3.2",
          amount3: 10,
        },
        {
          id: "1",
          name: "王小虎2",
          amount1: "165",
          amount2: "4.43",
          amount3: 12,
        },
        {
          id: "2",
          name: "王小虎2",
          amount1: "324",
          amount2: "1.9",
          amount3: 9,
        },
        {
          id: "3",
          name: "王小虎4",
          amount1: "621",
          amount2: "2.2",
          amount3: 17,
        },
        {
          id: "3",
          name: "王小虎5",
          amount1: "539",
          amount2: "4.1",
          amount3: 15,
        },
      ],
    };
  },
  methods: {
    /*合并列  begin*/
    getSpanArr(data) {
      // data就是我们从后台拿到的数据
      for (let i = 0; i < data.length; i++) {
        //如果是第一条记录（索引为０），向数组中加入１，并设置索引位置
        if (i === 0) {
          this.spanArr.push(1);
          this.pos = 0; //spanArr的索引

          this.spanArr2.push(1);
          this.pos2 = 0;
        } else {
          //如果不是第一条记录，则判断它与前一条记录是否相等
          //根据相同 扣分类别名称 进行合并,根据需要可进行修改
          if (data[i].id === data[i - 1].id) {
            //如果相等，则向spanArr中添入元素0，并将前一位元素＋１，表示合并行数＋１
            this.spanArr[this.pos] += 1;
            this.spanArr.push(0);
          } else {
            this.spanArr.push(1);
            this.pos = i;
          }

          if (data[i].name === data[i - 1].name) {
            //如果相等，则向spanArr中添入元素0，并将前一位元素＋１，表示合并行数＋１
            this.spanArr2[this.pos2] += 1;
            this.spanArr2.push(0);
          } else {
            this.spanArr2.push(1);
            this.pos2 = i;
          }
        }
      }
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          // [0,0] 表示这一行不显示， [2,1]表示行的合并数
          rowspan: _row,
          colspan: _col,
        };
      } else if (columnIndex === 1) {
        const _row = this.spanArr2[rowIndex];
        const _col = _row > 0 ? 2 : 0;
        return {
          // [0,0] 表示这一行不显示， [2,1]表示行的合并数
          rowspan: _row,
          colspan: _col,
        };
      }
    },
  },
  mounted() {
    this.getSpanArr(this.tableData);

  },
};
</script> -->
